<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS网页布局</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<!--header-->
	<div class="header">
		<div class="logo">
			<img src="image/logo.png">
		</div>
		<div class="nav">
			<ul>
				<li>首页</li>
				<li>图片</li>
				<li>视频</li>
				<li>手记</li>
			</ul>
		</div>
	</div>
	<!--body-->
	<div class="main">
		<div class="banner">
			<img src="image/banner.jpg">
		</div>
		<!--遮罩层-->
		<div class="topLayer"></div>
		<div class="topLayer-top">
			<p class="word">MY BEAUTIFUL LIFE</p>
			<button>LOOK MORE &gt;</button>
		</div>
		<div class="middle">
			<div class="m-top">
				<div class="commen">
					<img src="image/qq.png">
					<p class="contact">QQ</p>
				</div>
				<div class="commen">
					<img src="image/watch.png">
					<p class="contact">WECHAT</p>
				</div>
				<div class="commen">
					<img src="image/email.png">
					<p class="contact">EMAIL</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="m-middle">
				"I want to write down the beautiful things, <br/>it will be beautiful to remember later"
			</div>
			<div class="m-bottom">
				<div class="bot-com">
					<img src="image/Image1.png">
					<p class="des-tit">Cool Image</p>
					<p class="describe">Record The Picture</p>
				</div>
				<div class="bot-com">
					<img src="image/Image2.png">
					<p class="des-tit">Cool Image</p>
					<p class="describe">Record The Picture</p>
				</div>
				<div class="bot-com">
					<img src="image/Image1.png">
					<p class="des-tit">Cool Image</p>
					<p class="describe">Record The Picture</p>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="bottom">
			<div class="content">
				<div class="title">FROM THE PHOTO ALBUM</div>
				<div class="pic-content">
					<dl>
						<dt><img src="image/photo2.png"></dt>
						<dd> Life is like a book , just read more and morerefined , more write more carefully . When readmind open , all things have been indifferent toheart . Life is the precipitation . 
						</dd>
					</dl>
					<dl>
						<dt><img src="image/photo3.png"></dt>
						<dd> Life is like a book , just read more and morerefined , more write more carefully . When readmind open , all things have been indifferent toheart . Life is the precipitation . 
						</dd>
					</dl>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<!--footer-->
	<div class="footer">
		http://bowring.vvup.net/index.html
	</div>

</body>
</html>